<template>
  <el-main>
    <h3 style="padding-bottom: 10px;border-bottom: 1px solid #eee">企业名称：{{companyName}}</h3>
     <el-form :model="servesInfo" :rules="rules" ref="servesInfo" label-width="170px" class="demo-ruleForm">
       <el-form-item label="被服务人姓名：" prop="userName">
        <el-input class="input-width" v-model="servesInfo.userName" placeholder="请输入内容"></el-input>
      </el-form-item>
      <el-form-item label="被服务人性别：" prop="sex">
        <el-select v-model="servesInfo.sex" placeholder="请选择">
        <el-option
          v-for="item in sexList"
          :key="item.dValue"
          :label="item.dValue"
          :value="item.dKey">
        </el-option>
      </el-select>
      </el-form-item>
       <el-form-item label="被服务人证件类型：" prop="paperType">
        <el-select v-model="servesInfo.paperType" placeholder="全部">
        <el-option
          v-for="item in paperTypeList"
          :key="item.dKey"
          :label="item.dValue"
          :value="item.dKey">
        </el-option>
      </el-select>
      </el-form-item>
       <el-form-item label="被服务人证件号码：" prop="paper">
        <el-input class="input-width" v-model="servesInfo.paper" placeholder="请输入内容"></el-input>
      </el-form-item>
       <el-form-item label="被服务人电话号码：" prop="mobile">
          <el-input class="input-width" v-model="servesInfo.mobile" placeholder="请输入内容"></el-input>
      </el-form-item>
       <el-form-item label="被服务人电子邮件：" prop="mobile">
          <el-input class="input-width" v-model="servesInfo.email"  placeholder="请输入内容"></el-input>
      </el-form-item>
       <el-form-item label="所属商品：" prop="ptGoodsId">
          <el-select v-model="servesInfo.ptGoodsId" placeholder="全部">
        <el-option
          v-for="item in goodsInfoList"
          :key="item.id"
          :label="item.name"
          :value="item.id">
        </el-option>
      </el-select>
      </el-form-item>
      <el-form-item label="保单号/服务单号：" prop="cardNum">
         <el-input class="input-width" v-model="servesInfo.cardNum" placeholder="请输入内容"></el-input>
      </el-form-item>
       <el-form-item label="商品生效日期：" prop="beginTime">
         <el-date-picker v-model="servesInfo.beginTime" value-format="yyyy-MM-dd" type="date" placeholder="选择日期" />
      </el-form-item>
      <el-form-item label="商品失效日期：" prop="endTime">
         <el-date-picker v-model="servesInfo.endTime" value-format="yyyy-MM-dd" type="date" placeholder="选择日期" />
      </el-form-item>
      <el-form-item label="特别约定：" prop="remark">
         <el-input
          type="textarea"
          :rows="3"
           class="input-width"
          size="medium"
          placeholder="请输入内容"
          v-model="servesInfo.remark">
        </el-input>
      </el-form-item>
      <el-form-item label="保单状态：" prop="state">
         <el-radio-group v-model="servesInfo.state">
            <el-radio label="0">正常</el-radio>
            <el-radio label="1">中止</el-radio>
            <el-radio label="2">终止</el-radio>
            <el-radio label="3">失效</el-radio>
        </el-radio-group>
      </el-form-item>
     </el-form>
    <div class="list btn-center">
      <el-button type="primary" @click='addOrderRelation'>增加关联权益人</el-button>
      <el-button @click='otherInfo=false'>取消关联权益人</el-button>
    </div>
     <div class="other-info" v-show="otherInfo">
    <el-form :model="orderRelation" :rules="rules2" ref="orderRelation" label-width="170px" class="demo-ruleForm">
          <el-form-item label="关联权益人姓名：" prop="userName">
               <el-input class="input-width" v-model="orderRelation.userName" placeholder="请输入内容"></el-input>
          </el-form-item>
          <el-form-item label="关联权益人性别：" prop="sex">
            <el-select v-model="orderRelation.sex" placeholder="请选择">
            <el-option
              v-for="item in sexList"
              :key="item.dValue"
              :label="item.dValue"
              :value="item.dKey">
            </el-option>
          </el-select>
          </el-form-item>
          <el-form-item label="关联权益人证件类型：" prop="paperType">
              <el-select v-model="orderRelation.paperType" placeholder="全部">
                <el-option
                  v-for="item in paperTypeList"
                  :key="item.dKey"
                  :label="item.dValue"
                  :value="item.dKey">
                </el-option>
              </el-select>
          </el-form-item>
          <el-form-item label="关联权益人证件号码：" prop="paper">
              <el-input class="input-width" v-model="orderRelation.paper" placeholder="请输入内容"></el-input>
          </el-form-item>
           <el-form-item label="关联权益人手机号码：" prop="mobile">
             <el-input class="input-width" v-model="orderRelation.mobile" placeholder="请输入内容"></el-input>
          </el-form-item>
           <el-form-item label="关联权益人电子邮件：" prop="email">
             <el-input class="input-width" v-model="orderRelation.email" placeholder="请输入内容"></el-input>
          </el-form-item>
           <el-form-item label="与被服务人关系：" prop="relationType">
             <el-radio-group v-model="orderRelation.relationType">
                <el-radio label="1">父母</el-radio>
                <el-radio label="2">子女</el-radio>
                <el-radio label="3">配偶</el-radio>
                <el-radio label="4">其他</el-radio>
            </el-radio-group>
          </el-form-item>
    </el-form>  

   </div>
    <div class="btn-center">
      <el-button type="primary" @click='confirm'>提交</el-button>
      <el-button type="" @click='cancel'>取消</el-button>
    </div>
    
  </el-main>
</template>

<script>
const queryString = require('querystring')
import { servesInfo } from 'data/servesParams'
import { sexList, paperTypeList } from 'data/listBody'
export default {
  name: 'addOrEditServe',
  data() {
    return {
      companyName: '',
      sexList,
      paperTypeList,
      goodPlanList: [],
      otherInfo: false,
      servesInfo: JSON.parse(JSON.stringify(servesInfo)),
      goodsInfoList: [],
      orderRelation: {},
      rules: {
          ptGoodsId: [
            { required: true, message: '请选择所属商品', trigger: 'change' }
          ],
          userName: [
            { required: true, message: '请输入被服务人姓名', trigger: 'blur' }
          ],
          sex: [
            { required: true, message: '请选择被服务人性别', trigger: 'change' }
          ],
          paperType: [
            { required: true, message: '请选择被服务人证件类型', trigger: 'change' }
          ],
          paper: [
            { required: true, message: '请输入被服务人证件号码', trigger: 'blur' }
          ],
          mobile: [
            { required: true, message: '请输入被服务人电话号码', trigger: 'blur' }
          ],
          beginTime: [
            { type: 'string', required: true, message: '请选择商品生效日期', trigger: 'change' }
          ],
          endTime: [
            { type: 'string', required: true, message: '请选择商品失效日期', trigger: 'change' }
          ]
        },
         rules2: {
          userName: [
            { required: true, message: '请输入关联权益人姓名', trigger: 'blur' }
          ],
          sex: [
            { required: true, message: '请选择关联权益人性别', trigger: 'change' }
          ],
          paperType: [
            { required: true, message: '请选择关联权益人证件类型', trigger: 'change' }
          ],
          paper: [
            { required: true, message: '请输入关联权益人证件号码', trigger: 'blur' }
          ],
          mobile: [
            { required: true, message: '请输入关联权益人手机号码', trigger: 'blur' }
          ]
        },
    }
  },
  created() {
    this.init()
  },
  methods: {
    init() {
      const query = this.$route.query
      this.companyName = query.companyName
      this.companyId = query.companyId
      this.isEdit = query.type === 'edit'
      this.goodsName = this.isEdit ? query.goodsName : "新增商品"
      this.servesInfo.companyId = this.companyId
      this.getGoodsList()
      if (query.id) {
          this.servesInfo.id = query.id
          this.orderRelation.id=query.id
          this.getEditServe()
        } else {
          delete this.servesInfo.id
        }
    },
    getGoodsList() {
      const companyId = this.companyId
      const params = {
        companyId,
        page: 0,
        size: 1000
      }
      
      this.axios.get('/goods?' + queryString.stringify(params)).then((res) => {
        const code = Number(res.data.code)
        if (code === 200) {
          this.goodsInfoList = res.data.data.list
        } else {
          this.$message(this.mes.busy)
        }
      }).catch((err) => {
        console.log(err)
        this.$message(this.mes.busy)
      })
    },
    addOrderRelation() {
      this.otherInfo = true;
    },
    confirm() {
      if (this.otherInfo) {
        this.servesInfo.orderRelation = this.orderRelation;
          this.$refs['servesInfo'].validate((valid) => {
          if (valid) {
            this.$refs['orderRelation'].validate((valid2) => {
                if (valid2) {
                    this.sendBt();
                    } else {
                      console.log('error submit!!');
                      return false;
                    }
                });
          } else {
            console.log('error submit!!');
            return false;
          }
      });
      } else {
        delete this.servesInfo.orderRelation;
        this.$refs['servesInfo'].validate((valid) => {
          if (valid) {
            this.sendBt();
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      }
    },
    sendBt(){
      this.servesInfo.state = Number(this.servesInfo.state)
      this.servesInfo.ptGoodsId = Number(this.servesInfo.ptGoodsId)
      this.servesInfo.companyId = Number(this.servesInfo.companyId)
      this.servesInfo.sex = Number(this.servesInfo.sex)
      const type = this.edit ? 'put' : 'post'
      this.axios[type]('/order', this.servesInfo).then((res) => {
        const code = Number(res.data.code)
        if (code === 200) {
          this.$message(this.mes.success)
          this.$router.back()
        } else {
          this.$message(this.mes.busy)
        }
      }).catch((err) => {
        console.log(err)
        this.$message(this.mes.busy)
      })
    },
    cancel() {
      this.$router.back()
    },
    getGoodsPlan() {
      const param = {
        companyId: this.companyId
      }
      this.axios.get('/goodsPlan?' +  queryString.stringify(param)).then(res => {
        const code = Number(res.data.code)
        if (code === 200) {
          this.goodPlanList = res.data.data
        } else {
          this.$message(this.mes.busy)
        }
      }).catch((err) => {
        console.log(err)
        this.$message(this.mes.busy)
      })
    },
    getEditServe() {
      this.axios.get(`/order/${this.servesInfo.id}`).then(res => {
        const code = Number(res.data.code)
        if (code === 200) {
          const data = res.data.data
          for (var key in servesInfo) {
            this.servesInfo[key] = data[key]
          }
          this.servesInfo.beginTime = this.timeFormater(data.beginTime).format('YYYY-MM-DD')
          this.servesInfo.endTime = this.timeFormater(data.endTime).format('YYYY-MM-DD')
          this.servesInfo.state = String(this.servesInfo.state)
          this.otherInfo = !!this.servesInfo.orderRelation
          this.orderRelation = this.servesInfo.orderRelation || {}
        } else {
          this.$message(this.mes.busy)
        }
      }).catch((err) => {
        console.log(err)
        this.$message(this.mes.busy)
      })
    }
  }
}
</script>

<style lang="less" scoped>
@import url('../../../assets/less/input.less');
.btn-center{
  display: flex;
  justify-content: center;
}
.input-width {
  width:400px;
}
</style>
